<template>
    <div class="card" id="line" style="height: 400px"></div>
</template>
<script setup>
import {  watch } from 'vue'
import { initEcharts, LinearGradient } from '../utils/echart'
const props = defineProps({
    yearLine: {
        type: Array,
    }
})

watch(() => props.yearLine, (newValue, oldValue) => {
    console.log(newValue, oldValue)
    initYearChart(newValue)
})
// 全年薪资走势
const initYearChart = (yearLine) => {

    const data = yearLine
    const myEchart = initEcharts('#line')
    myEchart.setOption({
      xAxis: {
        type: 'category',
        // data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
        data: data.map((item) => item.month),
        axisLine: {
          lineStyle: {
            color: '#ccc',
            type: 'dashed',
          },
        },
        axisLabel: {
          color: '#999',
        },
      },
      tooltip: {
        trigger: 'axis',
      },
      yAxis: {
        type: 'value',
        splitLine: {
          lineStyle: {
            type: 'dashed',
          },
        },
      },
      title: {
        text: '2022全学科薪资走势',
        top: 15,
        left: 10,
        textStyle: {
          fontSize: 16,
        },
      },
      grid: {
        top: '20%',
      },
      color: [
        {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 1,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: '#499FEE', // 0% 处的颜色
            },
            {
              offset: 1,
              color: '#5D75F0', // 100% 处的颜色
            },
          ],
        },
      ],
      series: [
        {
          data: data.map((item) => item.salary),
          type: 'line',
          smooth: true,
          lineStyle: {
            width: 6,
          },
          symbolSize: 10,
          areaStyle: {
            color: new LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: '#499FEE',
              },
              {
                offset: 0.8,
                color: 'rgba(255,255,255,0.2)',
              },
              {
                offset: 1,
                color: 'rgba(255,255,255,0)',
              },
            ]),
          },
        },
      ],
    })
  }

</script>